<template>
  <div>

    <!-- 顶部标题 -->
    <div class="myhead">办公设备管理</div>
    <!-- 主体结构 -->
    <div style="padding-top:60px;">

      <grid :cols="cols ">
        <grid-item :link="{ path: item.path}" v-for="(item,index) in mydata" :key="index">
          <span slot="icon">
            <icon :name="item.icon" :style="item.style"></icon>
          </span>
          <span slot="label" style="padding-top:20px">{{ item.name}}</span>
        </grid-item>

      </grid>
      <br><br>
    </div>
    <!-- 主体结束 -->

    <!-- 关于弹窗 -->
    <div v-transfer-dom>
      <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
        <p style="color:#fff;text-align:center;" @click="showDialogStyle = false">
          <span style="font-size:20px;">欢迎使用办公设备管理软件</span>
          <br><br>
          <span> 中航电测仪器股份有限公司-汉中分公司</span>
          <br>
          <span> 1、报修、报废等操作未实现</span>
          <br>
          <span> 2、查询条件为空时查询，则返回所有数据</span>
          <br>
          <span> 3、部分样式可能有问题，此测试版本不再修正</span>
          <br>
          <span> 4、此版本不再更新，后期移至微信</span>
          <br><br>
          <span>it@zemic.com.cn</span>
          <!-- <icon name="paper-plane" style="height:100px;" color="#09BB07"></icon> -->
        </p>
      </x-dialog>
    </div>
    <!-- 弹窗结束 -->

    <!-- 说明弹窗 -->
    <div v-transfer-dom>
      <alert v-model="show2" title="说明" content="此版本为过渡版本，后期会转为微信或小程序" style="text-align:center"></alert>
    </div>
    <!-- 说明结束 -->

    <!-- 底部导航 -->
    <tabbar style="position: fixed">
      <tabbar-item @on-item-click="show2=true" class="import">
        <span slot="icon">
          <icon name="comment-dots"></icon>
        </span>
        <span slot="label">说 明</span>
      </tabbar-item>

      <tabbar-item @on-item-click="showDialogStyle=true">
        <span slot="icon">
          <icon name="leaf"></icon>
        </span>
        <span slot="label">关 于</span>
      </tabbar-item>
    </tabbar>
    <!-- 底部导航结束 -->

  </div>
</template>

<script>
import {
  Masker,
  Tabbar,
  TabbarItem,
  XDialog,
  XButton,
  Grid,
  GridItem,
  GroupTitle,
  CheckIcon,
  Confirm,
  Alert,
  TransferDomDirective as TransferDom
} from "vux";
import Icon from "vue-awesome/components/Icon";
import "vue-awesome/icons/comment-dots";
import "vue-awesome/icons/leaf";
import "vue-awesome/icons/paper-plane";
import "vue-awesome/icons/table";
import "vue-awesome/icons/chart-line";
import "vue-awesome/icons/info";
import "vue-awesome/icons/wrench";
import "vue-awesome/icons/id-card";
import "vue-awesome/icons/list-ul";
import "vue-awesome/icons/desktop";
import "vue-awesome/icons/inbox";
import "vue-awesome/icons/key";
import "vue-awesome/icons/male";
import "vue-awesome/icons/diagnoses";
export default {
  directives: {
    TransferDom
  },
  components: {
    Masker,
    Tabbar,
    TabbarItem,
    Icon,
    XDialog,
    XButton,
    Grid,
    GridItem,
    GroupTitle,
    CheckIcon,
    Confirm,
    Alert
  },
  data() {
    return {
      showDialogStyle: false,
      show2: false,
      cols: 2,
      myinput: null,
      mydata: []
    };
  },
  created() {
    this.initmenu();
  },
  methods: {
    async initmenu() {
      await this.menu();
    },
    menu() {
      for (const key in this.$store.state.info.jursidiction) {
        switch (this.$store.state.info.jursidiction[key].Jurisdiction_path) {
          case "/devicelist":
            this.mydata.push({
              id: 1,
              name: "设备管理",
              path: "/devicelist",
              style: "color:#ED71C5;margin-left:-11px",
              icon: "desktop"
            });
            break;
          case "/chats":
            this.mydata.push({
              id: 2,
              name: "报表图表",
              path: "/chats",
              style: "color:#09BB07;margin-left:-10px",
              icon: "chart-line"
            });
            break;
          case "/depchats":
            this.mydata.push({
              id: 2,
              name: "报表图表",
              path: "/depchats",
              style: "color:#09BB07;margin-left:-10px",
              icon: "chart-line"
            });
            break;
          case "/work":
            this.mydata.push({
              id: 3,
              name: "待办工作",
              path: "/work",
              style: "color:#10aeff;margin-left:-10px",
              icon: "table"
            });
            break;
          case "/mydevice":
            this.mydata.push({
              id: 4,
              name: "我的设备",
              path: "/mydevice",
              style: "color:#ffbe00;margin-left:-10px",
              icon: "id-card"
            });
            break;
          case "/myinfo":
            this.mydata.push({
              id: 5,
              name: "保修信息",
              path: "/myinfo",
              style: "color:#FF6F00;margin-left:5px",
              icon: "info"
            });
            break;
          case "/maintenance":
            this.mydata.push({
              id: 6,
              name: "维修记录",
              path: "/maintenance",
              style: "color:#9C85CD;margin-left:-10px",
              icon: "list-ul"
            });
            break;
          case "/mydriver":
            this.mydata.push({
              id: 7,
              name: "驱动程序",
              path: "/mydriver",
              style: "color:#0085A8;margin-left:-12px",
              icon: "inbox"
            });
            break;
          case "/jurisdictionManage":
            this.mydata.push({
              id: 8,
              name: "权限管理",
              path: "/jurisdictionManage",
              style: "color:#ffbe00;margin-left:-12px",
              icon: "key"
            });
            break;
          case "/userManage":
            this.mydata.push({
              id: 9,
              name: "用户管理",
              path: "/userManage",
              style: "color:#ED71C5;margin-left:5px",
              icon: "male"
            });
            break;
          case "/roleManage":
            this.mydata.push({
              id: 10,
              name: "角色管理",
              path: "/roleManage",
              style: "color:#09BB07;margin-left:-12px",
              icon: "diagnoses"
            });
            break;
        }
      }
    }
  }
};
</script>

<style>
.vux-check-icon {
  position: absolute;
  z-index: 200;
}
.fa-icon {
  width: auto;
  height: 20px; /* 或任意其它字体大小相对值 */
}
.weui-grid__icon .fa-icon {
  height: 50px;
  color: #999999;
}
.myhead {
  background-color: #10aeff;
  position: fixed;
  padding: 0;
  line-height: 60px;
  color: #ffffff;
  height: 60px;
  text-align: center;
  width: 100%;
  z-index: 500;
}

::-webkit-scrollbar {
  display: none; /*隐藏滚轮*/
}

p.weui-grid__label {
  margin-top: 5px;
  padding-top: 20px;
}
</style>
